<template>
    <div>
        <!-- 为echarts设置一个足够大小的容器 -->
        <div id="main" style="width: 100vw;height:100vh;"></div>
    </div>
</template>

<script>
import http from '@/untils/request';
export default {
    data() {
        return {
            xAxisData: [],
            AreaTopList: [],
            seriesData: [],
        }
    },
    methods: {
        //    初始化echarts函数
        initEcharts() {
            // 基于准备好的dom，初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById('main'));
            // 绘制图表
            this.myChart.setOption({
                title: { text: '各地区种植面积统计TOP10' },
                tooltip: {},
                xAxis: {
                    // data: 
                },
                yAxis: {
                    // type: 'category',
                    data: this.xAxisData
                },
                series: [{
                    name: '销量',
                    showBackground: true,
                    type: 'bar', //柱状图
                    // data: [5, 20, 36, 10, 10, 20]
                    data: this.seriesData,
                    itemStyle: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#10395d' },   // 渐变起始颜色
                            { offset: 1, color: '#33b4da' }    // 渐变结束颜色
                        ])
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}万亩'
                    }
                }]
            });
            // console.log(this.xAxisData);

        },
        // 2-》发请求
        getData() {
            // console.log(this.xAxisData);
            http('/api/plantingAreaTop', 'get').then(res => {
                this.AreaTopList = res
                console.log(this.AreaTopList);
                this.xAxisData = res.map(item => { return item.name })
                this.seriesData = res.map(item => { return item.area })
                this.initEcharts()
            }).catch(err => {
                console.log(err)
            })
        },
        // 3-》更新echarts
        // setChart(xdata) {
        //     this.myChart.setOption({
        //         xAxis: {
        //             data: xdata
        //         }
        //     })
        // }
    },
    mounted() {
        this.getData();

    }
}

</script>

<style lang="less" scoped></style>